<template>
    <div class="container gen-order">
        <div class="file-upload-container" v-if="status==0">
            <el-upload
                ref="upload"
                action="/"
                drag
				multiple
                accept=".xlsx, .xlsm, .xls"
                :auto-upload="false"
                :on-change="handleChange"
				show-file-list>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传excel文件,<a :href="excelSrc">点击</a>下载模板</div>
            </el-upload>
            <div class="begin-btn">
                <el-button type="primary" @click="handleBegin" :disabled="!hasFile" v-if="status==0">开始解析</el-button> 
            </div>
        </div>
		<div class="tpl-container" v-if="status==1">
			<div class="left">
				<el-tabs v-model="configName">
					<el-tab-pane label="内容设置" name="content">
						<json-form
						 ref="orderForm"
						 :options="contentOptions"
						 direction="h"
						 :form="form"  v-viewer>
							<template v-slot:img="{data}">
								<img width="50" height="50" :src="data | getFilePath"/>
							</template>
							<template v-slot:screenshot="{data}">
								<div class="row-image">
									<img width="50" height="50" :src="item | getFilePath" v-for="item in data" :key="item" />
									<!-- <img width="50" height="50" :src="item | getFilePath" v-for="item in data" :key="item" /> -->
								</div>
							</template>
						</json-form>
						<div class="bottom-btn-groups">
							<div class="ipt-wrap">
								<span>共{{importArrs.length}}条数据 跳到</span>
								<span class="ipt">
									<el-input v-model="jump" 
									:max="importArrs.length || 1"
									:min="1"
									@change="handleJump"
									size="mini" type="number"></el-input>
								</span>
							</div>
							<el-button :disabled="!hasPrev" type="warning" @click="handlePrev" size="mini" icon="el-icon-arrow-left">
								
							</el-button>
							<div style="margin: 0 10px;">{{ currentIndex }}</div>
							<el-button :disabled="!hasNext"  type="warning" @click="handleNext" size="mini" icon="el-icon-arrow-right">
							</el-button>
							<el-button 
								@click="handleGenerate" 
								size="mini"
								type="success">
								生成凭证
							</el-button>
							<el-button 
								@click="handleSubmit"
								size="mini"
								type="primary">
								保存当前订单
							</el-button>
							<el-button 
								@click="autoGenerate"
								size="mini"
								type="danger">
								保存所有订单
							</el-button>
							<el-button @click="handleBack" size="mini">
								返回
							</el-button>
						</div>
						
					</el-tab-pane>
				</el-tabs>
				<div class="err-log">
					<div class="log" v-for="item in errorLogs" :key="item">
						{{ item }}
					</div>
				</div>
			</div>
			<div :class="{right:true,'scale':isDraw}">
				<div ref="mtphone" :class="{phone:true,'mt-phone':platform=='mt'}" v-show="platform=='mt'">
					<div class="top">
						<!-- <img src="@/assets/image/mt/mt-top.png" alt=""> -->
						<img src="@/assets/image/mt-top.png" alt="">
					</div>
					<!-- <div class="box mt-header">
						<div class="txt1">感谢您对美团外卖的信任，期待再次光临。</div>
						<div class="txt2">温馨提示：请厉行节约，拒绝浪费。</div>
						<div class="txt3">
							<div class="icon icon-zhunshi">
								<img src="@/assets/image/mt/zhunshi.png" alt="" srcset="">
							</div>
							<div style="margin:0 5px;">准时宝 订单已准时送达</div>
							<div class="icon icon-arrow">
								<img src="@/assets/image/mt/arrow.png"/>
							</div>
						</div>
						<div class="diver"></div>
						<div class="operations">
							<div class="op-btn" v-for="item in mtOperationBtns" :key="item.label">
								<div class="icon icon-op-btn">
									<img :src="item.image" alt="" srcset="">
								</div>
								<div>{{ label }}</div>
							</div>
						</div>
					</div> -->
					<!-- <div class="box lipei">
						<div class="lcontent">
							<div class="h">放心吃理赔申请</div>
							<div class="tips">如食品引发就医，可在线申请理赔</div>
						</div>
						<div class="rcontent icon">
							<img src="@/assets/image/mt/mt2_03.png" alt="">
						</div>
					</div> -->
					<!-- <div class="box price-container">
						<span>已优惠</span>
						<span class="price">￥{{ form.rprice }}</span>
							
						<span style="margin-left:10px">合计</span>
						<span class="price2">￥{{form.amount}}</span>
						<div>
							
						</div>
						<div class="totalWrap">
						</div>
					</div> -->
					<div class="box order-info">
						<div class="title">
							配送信息
						</div>
						<div class="row">
							<div class="label">店铺名称</div>
							<div class="value">{{ form.shopName }}</div>
						</div>
						<!-- <div class="row time">
							<div class="label">期望时间</div>
							<div class="value">{{ form.ytime }}</div>
						</div>
						<div class="row">
							<div class="label">配送地址</div>
							<div class="value">
								<div class="address">{{ form.address }}</div>
								<div class="address">{{form.name}}{{ form.phone }}</div>
							</div>
						</div>
						<div class="row">
							<div class="label">配送服务</div>
							<div class="value">{{ form.ptype }}</div>
						</div> -->
						<div class="row">
							<div class="label">订单编号</div>
							<div class="value">{{ form.orderNo }}</div>
						</div>
						<div class="row time">
							<div class="label">送达时间</div>
							<div class="value">{{ form.ytime }}</div>
						</div>
						<div class="row">
							<div class="label">订单时间</div>
							<div class="value">{{ form.orderCreateTime }}</div>
						</div>
						<div class="row">
							<div class="label">
								实付金额
							</div>
							<div class="value mt-price">
								￥{{ form.amount }}
							</div>
						</div>
						<!-- <div class="row">
							<div class="label">餐具数量</div>
							<div class="value">{{ form.remark }}</div>
						</div> -->
					</div>
				</div>

				<div ref="elphone" :class="{phone:true,'ele-phone':platform=='ele'}" v-show="platform=='ele'">
					<div class="top">
						<img src="@/assets/image/ele-top.png" alt="" srcset="">
					</div>
					<div class="box el-order-info">
						<div class="title">
							订单已送达
						</div>
						<div class="row">
							<div class="label">
								店铺名称
							</div>
							<div class="value">
								{{ form.shopName }}
							</div>
						</div>
						<div class="row">
							<div class="label">
								订单编号
							</div>
							<div class="value">
								{{ form.orderNo }}
							</div>
						</div>
						<div class="row">
							<div class="label">
								订单时间
							</div>
							<div class="value">
								{{ form.orderCreateTime }}
							</div>
						</div>
						<div class="row">
							<div class="label">
								实付金额
							</div>
							<div class="value el-price">
								￥{{ form.amount }}
							</div>
						</div>
					</div>
				</div>
			
				<div ref="jdphone" :class="{phone:true,'jd-phone':platform=='jd'}" v-show="platform=='jd'">
					<div class="top">
						<img src="@/assets/image/jd-top.png" alt="" srcset="">
					</div>
					<div class="box jd-order-info">
						<div class="title">
							配送信息
						</div>
						<div class="row">
							<div class="label">
								店铺名称
							</div>
							<div class="value">
								{{ form.shopName }}
							</div>
						</div>
						<div class="row">
							<div class="label">
								订单编号
							</div>
							<div class="value">
								{{ form.orderNo }}
							</div>
						</div>
						 
						<div class="row">
							<div class="label">
								订单时间
							</div>
							<div class="value">
								{{ form.orderCreateTime }}
							</div>
						</div>
						<div class="row">
							<div class="label">
								实付金额
							</div>
							<div class="value jd-price">
								￥{{ form.amount }}
							</div>
						</div>
					</div>
				</div>
			

			</div>
			<!-- <div v-if="myImage">
				<img :src="myImage" alt="" srcset="">
			</div> -->
		</div>
    </div>
</template>
<script>
import ImagePreview from "@/components/image-preview.vue"
import jsonForm from "@/components/json-form.vue"
import text from "@/components/text.vue"
import {dataURLtoFile, readFile} from "@/util/fileUtil"
import {uploadMode,uploadModeType} from "@/config/upload"
import {importAddOrder} from "@/apis/order"
import html2canvas from "html2canvas"
import * as XLSX from "xlsx"
import dayjs from "dayjs"
export default{
	components:{
		jsonForm,
		text,
		ImagePreview
	},
	data(){
		return {
			status:0,
			hasFile:false,
			jump:null,
			form:{
				rprice:"0.00",
				amount:"0.00",
				billNo:"XXYX170252256516693034406189",
				// orderId:"300860500410999384",
				money:"25",
				img:"",
				ytime:"立即配送",
				address:"地址",
				name:"王**(先生)",
				phone:"123****4567",
				orderNo:"300860500410999384",
				orderCreateTime:"2023-12-19 13:48:28",
				remark:"商家按餐量提供",
				ptype:"由美团快送提供配送服务",
				shopName:"金汤铺炖汤世家（六里桥店）",
				platform:"美团",
				screenshot:[]
			},
			configName:"content",
			// platform:"mt",
			isDraw:true,
			// myImage:"",
			platformOptions:{
				jd:[
					{
						key:"shopName",
						type:"el-input",
						label:"店铺名称",
						required:true
					},
					{
						key:"orderNo",
						type:"el-input",
						label:"平台订单号",
						required:true
					},
					{
						key:"amount",
						type:"el-input",
						label:"实付金额",
						required:true
					},
					{
						key:"orderCreateTime",
						type:"el-date-picker",
						label:"订单时间",
						props:{
							type:"datetime",
							format:"yyyy-MM-dd HH:mm:ss",
							"value-format":"yyyy-MM-dd HH:mm:ss"
						},
						required:true
					},
					{
						key:"billNo",
						type:"el-input",
						label:"账单编号",
						// width:250,
						required:true
					},
					
					// {
					// 	key:"orderId",
					// 	type:text,
					// 	label:"订单id",
					// 	required:true
					// },
					{
						key:"money",
						type:"el-input",
						label:"结算金额",
						required:true
					},
					{
						key:"img",
						slot:"img",
						label:"生成凭证",
					},
					{
						key:"screenshot",
						slot:"screenshot",
						label:"体验截图",
					}
				],
				ele:[
					{
						key:"shopName",
						type:"el-input",
						label:"店铺名称",
						required:true
					},
					{
						key:"orderNo",
						type:"el-input",
						label:"平台订单号",
						required:true
					},
					{
						key:"amount",
						type:"el-input",
						label:"实付金额",
						required:true
					},
					{
						key:"orderCreateTime",
						type:"el-date-picker",
						label:"订单时间",
						props:{
							type:"datetime",
							format:"yyyy-MM-dd HH:mm:ss",
							"value-format":"yyyy-MM-dd HH:mm:ss"
						},
						required:true
					},
					{
						key:"billNo",
						type:"el-input",
						label:"账单编号",
						// width:250,
						required:true
					},
					
					// {
					// 	key:"orderId",
					// 	type:text,
					// 	label:"订单id",
					// 	required:true
					// },
					{
						key:"money",
						type:"el-input",
						label:"结算金额",
						required:true
					},
					{
						key:"img",
						slot:"img",
						label:"生成凭证",
					},
					{
						key:"screenshot",
						slot:"screenshot",
						label:"体验截图",
					}
				],
				mt:[
					{
						key:"shopName",
						type:"el-input",
						label:"店铺名称",
						required:true
					},
					{
						key:"orderNo",
						type:"el-input",
						label:"平台订单号",
						required:true
					},
					// {
					// 	key:"rprice",
					// 	type:"el-input",
					// 	label:"已优惠",
					// 	required:true
					// },
					{
						key:"amount",
						type:"el-input",
						label:"实付金额",
						required:true
					},
					// {
					// 	key:"ytime",
					// 	type:"el-input",
					// 	label:"期望时间"
					// },
					{
						key:"ytime",
						type:"el-input",
						label:"送达时间"
					},
					// {
					// 	key:"address",
					// 	type:"el-input",
					// 	label:"地址",
					// 	required:true
					// },
					// {
					// 	key:"name",
					// 	type:"el-input",
					// 	label:"收货人",
					// 	required:true
					// },
					// {
					// 	key:"phone",
					// 	type:"el-input",
					// 	label:"电话",
					// 	required:true
					// },
					
					// {
					// 	key:"ptype",
					// 	type:"el-input",
					// 	label:"配送服务",
					// 	required:true
					// },
					{
						key:"orderCreateTime",
						type:"el-date-picker",
						label:"订单时间",
						required:true,
						props:{
							type:"datetime",
							format:"yyyy-MM-dd HH:mm:ss",
							"value-format":"yyyy-MM-dd HH:mm:ss"
						}
					},
					// {
					// 	key:"remark",
					// 	type:"el-input",
					// 	label:"餐具数量",
					// 	required:true
					// },
					{
						key:"billNo",
						type:"el-input",
						label:"账单编号",
						// width:250,
						required:true
					},
					
					// {
					// 	key:"orderId",
					// 	type:text,
					// 	label:"订单Id",
					// 	required:true
					// },
					{
						key:"money",
						type:"el-input",
						label:"结算金额",
						required:true
					},
					{
						key:"img",
						slot:"img",
						label:"生成凭证",
					},
					{
						key:"screenshot",
						slot:"screenshot",
						label:"体验截图",
					}
				]
			},
			mtOperationBtns:[
				// {
				// 	label:"打赏骑手",
				// 	image:require("@/assets/image/mt/mt_111.png")
				// },
				// {
				// 	label:"打赏骑手",
				// 	image:require("@/assets/image/mt/mt_111.png")
				// }
			],
			importArrs:[],
			currentIndex:1,
			errorLogs:[]
		}
	},
	methods:{
		handleChange(file){
			console.log(file)
			this.hasFile = this.$refs.upload.uploadFiles.length>0
		},
		async handleBegin(){
			console.log("解析文件")
			let files = this.$refs.upload.uploadFiles
			console.log(files)
			for(let i = 0;i<files.length;i++){
				let dataBinary = await readFile(files[i].raw)
				let workBook = XLSX.read(dataBinary, { type: "binary", cellDates: true })
				let workSheet = workBook.Sheets[workBook.SheetNames[0]]
				console.log(workSheet)
				// console.log(workSheet)
				// const data = XLSX.utils.sheet_to_json(workSheet,{header:1,range:1})
				let data = XLSX.utils.sheet_to_json(workSheet,{raw:false, range:1})
				console.log(data)//这里已经能拿到转换后的json
				data = data.map(item=>{
					return {
						...item,
						img:"",
						screenshot:[],
						ytime:item.ytime?item.ytime:"立即配送",
						remark:item.remark?item.remark:"商家按餐量提供",
						ptype:item.ptype?item.ptype:"由美团快送提供配送服务",
						orderNo:item.orderNo,
						orderCreateTime:dayjs(item.orderCreateTime).format("YYYY-MM-DD HH:mm:ss")
					}
				})
				let {data:fileObj} = await this.getExcelImage(files[i].raw)
				// console.log(fileObj)
				for(let key in fileObj ){
					// console.log(key)
					data[key-2].screenshot = fileObj[key]
				}
				console.log(data)//这里已经能拿到转换后的json
				this.importArrs = this.importArrs.concat(data)
			}
			if(this.importArrs.length==0){
				this.$message.error("excel数据为空")
				return
			}
			this.form = this.importArrs[this.currentIndex-1]
			this.status = 1
			this.$nextTick(async ()=>{
				// await this.autoGenerate()
				await this.generatePic()
			})
		},
		async autoGenerate(){
			for(let i = 0;i<this.importArrs.length;i++){
				console.log(i,this.importArrs.length)
				this.currentIndex = i+1
				this.form = this.importArrs[i]
				// await this.sleep(1000)
				await this.generatePic()
				// await this.sleep(500)
				await this.handleSubmit()
				// await this.sleep(500)
				// await this.sleep(500)
			}
			this.currentIndex = this.importArrs.length
		},
		async handleGenerate(){
			await this.generatePic()
		},
		generatePic(){
			return new Promise((resolve,reject)=>{
				this.$refs.orderForm.submit(()=>{
					this.isDraw = false
					this.$nextTick(()=>{
						let current = null
						if(this.platform=="mt"){
							current = this.$refs.mtphone
						}
						else if(this.platform=="jd"){
							current = this.$refs.jdphone
						}
						else{
							current = this.$refs.elphone
						}
						// console.log(current.innerHTML)
						html2canvas(current,{
							// scale:0.5,
							allowTaint:true,
							useCORS:true,
						}).then(canvas=>{
							console.log(canvas)
							var myImage = canvas.toDataURL("image/png")
							// console.log(myImage)
							this.isDraw = true
							// this.myImage = myImage
							this.form.img = myImage
							resolve()
						})
					})
				},()=>{
					reject()
				})
			})
			
		},
		async handleSubmit(){
			//先上传图片
			await this.uploadBase64File()
			//构造订单数据
			let {
				billNo,
				// orderId,
				orderNo,
				money,
				amount,
				orderCreateTime,
				img,
				screenshot
			} = this.form
			let data = {
				bid:billNo,
				// orderId,
				orderNo,
				money,
				amount,
				orderCreateTime,
				imgList:[img,...screenshot]
			}
			console.log(data)
			try {
				await importAddOrder(data)
			} catch (error) {
				console.log(error)
				if(error.message){
					this.errorLogs.push("平台订单号:"+orderNo+" "+error.message)
				}
			}
		},
		async uploadBase64File(){
			return new Promise((resolve,reject)=>{
				//
				if(this.form.img && !this.form.img.includes("base64")){
					resolve(this.form)
				}
				if(!this.form.img){
					this.$message.error("凭证未生成")
					return
				}
				let file = dataURLtoFile(this.form.img,new Date().getTime()+".jpg")
				console.log(file)
				let currentUploadMod = uploadModeType[uploadMode]
				// return
				currentUploadMod.upload(this.action,file,{
					key:"type",
					value:"images/genorder"
				}).then(response=>{
					console.log(response)
					let url = response.replace(currentUploadMod.target,currentUploadMod.tag)
					console.log(url)
					this.form.img = url
					this.$refs.orderForm.submit(res=>{
						console.log("验证通过",res)
						resolve(res)
					})
				}).catch(fail=>{
					reject(fail)
				})
			})
		},
		handleNext(){
			if(this.hasNext){
				if(this.currentIndex>this.importArrs.length || this.currentIndex<1){
					this.currentIndex = this.importArrs.length
					return
				}
				this.currentIndex = this.currentIndex+1
				this.refreshPage()
			}
		},
		handlePrev(){
			if(this.hasPrev){
				if(this.currentIndex>this.importArrs.length || this.currentIndex<1){
					this.currentIndex = 1
					return
				}
				this.currentIndex = this.currentIndex-1
				this.refreshPage()
			}
		},
		handleJump(page){
			page = page - 0
			if(page<1||page>this.importArrs.length){
				this.$message.error("页码错误")
				this.jump = null
				return
			}
			this.currentIndex = page
			this.form = this.importArrs[page-1]
			this.jump = null
			
		},
		refreshPage(){
			this.form = this.importArrs[this.currentIndex-1]
			this.generatePic()
		},
		sleep(time=1000){
			return new Promise((resolve)=>{
				setTimeout(()=>{
					resolve()
				},time)
			})
		},
		handleBack(){
			this.status = 0
			this.importArrs = []
			this.currentIndex = 1
			this.errorLogs = []
		},
		async getExcelImage(file){
			let currentUploadMod = uploadModeType[uploadMode]
			let res = await currentUploadMod.upload(this.parseImageAction,file,{
				key:"type",
				value:"images/parseExcel"
			})
			console.log(res)
			return res
		}
	},
	computed:{
		platform(){
			if(this.form.platform.includes("美团")){
				return "mt"
			}
			else if(this.form.platform.includes("京东")){
				return "jd"
			}
			else{
				return "ele"
			}
			//return this.form.platform.includes("美团")?"mt":"ele"
		},
		contentOptions(){
			return this.platformOptions[this.platform]
		},
		action(){
			return process.env.VUE_APP_UPLOAD_URL + "/image"
		},
		parseImageAction(){
			return process.env.VUE_APP_REQUEST_URL + "order/parseImage"
		},
		hasNext(){
			return this.currentIndex < this.importArrs.length
		},
		hasPrev(){
			return this.currentIndex > 1
		},
		excelSrc(){
			let mode = process.env.NODE_ENV
			let src = "/"
			if(mode=="production"){
				src = "./"
			}
			return src + "excel/tpl.xlsx"
		}
	},
	watch:{
		// currentIndex(newval,oldval){
		// 	console.log(newval,oldval)
		// 	if(this.status==1){
		// 		if(newval>this.importArrs.length || newval < 1){
		// 		// this.$message.error("跳转错误")
		// 			return
		// 		}
		// 		this.form = this.importArrs[newval-1]
		// 	}
		// }
	}
}
</script>
<style lang="less">
// @phone-width:640px;
// .file-upload-container{
//     display: flex;
//     justify-content: center;
//     .begin-btn{
//         margin-left: 20px;
//     }
// }
// .gen-order{
// 	min-height: 125%;
// 	.tpl-container{
// 		width: 100%;
// 		height: 100%;
// 		display: flex;
// 		flex-direction: row;
// 		.left{
// 			// flex: 1;
// 			width: calc(100% - @phone-width / 2);
// 			padding: 0 20px 0 0;
// 			.bottom-btn-groups{
// 				font-size: 14px;
// 				display: flex;
// 				align-items: center;
// 				.ipt-wrap{
// 					display: flex;
// 					align-items: center;
// 					margin-right: 10px;
// 					.ipt{
// 						width: 100px;
// 						margin-left: 10px;
// 					}
// 				}
// 			}
// 			.row-image{
// 				// display: flex;
// 				// align-items: center;
// 				&>img{
// 					margin-right: 10px;
// 				}
// 			}
// 			.err-log{
// 				margin-top: 20px;
// 				font-size: 12px;
// 				color: #666;
// 			}
// 		}
// 		.right{
// 			position: absolute;
// 			right: 10px;
// 			height: 100%;
// 			transform-origin: top right;
// 			&.scale{
// 				transform: scale(0.5);
// 			}
// 			// overflow: hidden;
// 			.phone{
// 				width: @phone-width;
// 				// width: 320px;
// 				// min-height:568px;
// 				min-height:1382px;
// 				// min-height:1443px;
// 				// background-color: red;
				
// 			}
// 			.mt-phone{
// 				background-color: #F6F6F6;
// 				font-size: 24px;
// 				padding-bottom: 120px;
// 				min-height: 1136px;
// 				.top{
// 					img{
// 						width: 100%;
// 					}
// 				}
// 				.box{
// 					border-radius: 20px;
// 					margin:10px 22px;
// 					padding: 18px 22px 16px;
// 					background-color: #FFF;
// 				}
// 				.mt-header{
// 					display: none;

// 					.icon-zhunshi{
// 						width: 20px;
// 						height: 22px;
// 						padding-top: 2px;
// 					}
// 					.icon-arrow{
// 						// width: 20px;
// 						// height: 24px;
// 						transform: scale(.7);
// 					}
// 					.icon{
// 						display: flex;
// 						img{
// 							width: 100%;
// 							height: 100%;
// 						}
// 					}
// 					&>div{
// 						line-height: 35px;
// 					}
// 					.txt1{
// 						color: #929292;
// 						font-size: 22px;
// 					}
// 					.txt2{
// 						color: #B7B7B7;
// 						font-size: 18px;
// 					}
// 					.txt3{
// 						display: flex;
// 						align-items: center;
// 						color: #343434;
// 						font-size: 22px;
// 						margin-bottom: 20px;
// 					}
// 					.diver{
// 						width: 100%;
// 						height: 1px;
// 						background-color: #f1f1f1;
// 					}
// 					.operations{
// 						display: flex;
// 						align-items: center;
// 						flex-wrap: wrap;
// 						.op-btn{
// 							display: flex;
// 							flex-direction: column;
// 							align-items: center;
// 							.icon-op-btn{
// 								width: 40px;
// 								height: 40px;
// 							}
// 						}
// 					}
					
// 				}
// 				.price-container{
// 					// text-align: right;
// 					// height:32.5px;
// 					// line-height: 32.5px;
// 					display: flex;
// 					justify-content: flex-end;
// 					align-items: center;
// 					.price{
// 						color: #FE4B35;
// 						font-size: 26px;
// 						// letter-spacing: -1px;
// 					}
// 					.price2{
// 						font-size: 30px;
// 						color: #333333;
// 					}
// 					.totalWrap{
// 						margin-left: 10px;
						
// 					}
// 					// &>div{
// 					// 	line-height: 28px;
// 					// }
// 				}
// 				.order-info{
// 					margin-top: 20px;
// 					.title{
// 						font-size: 30px;
// 						color: #242424;
// 						margin-bottom: 35px;
// 					}
// 					.row{
// 						display: flex;
// 						align-items: flex-start;
// 						justify-content: space-between;
// 						margin-bottom: 35px;
// 						.label{
// 							color: #999999;
// 						}
// 						.value{
// 							color: #333333;
// 							text-align: right;
// 							max-width: 400px;
//     						word-break: break-all;
// 						}
// 						.address{
// 							max-width: 400px;
//     						word-break: break-all;
// 						}
// 					}
// 				}
// 			}
// 			.ele-phone{
// 				height: 100%;
// 				font-size: 22px;
// 				background-color: #F6F6F6;
// 				.top{
// 					img{
// 						width: 100%;
// 					}
// 				}
// 				.box{
// 					border-radius: 20px;
// 					margin:10px 20px;
// 					padding: 20px 20px 16px;
// 					background-color: #FFF;
// 				}
// 				.el-order-info{
// 					margin-top: 8px;
// 					.title{
// 						font-size: 29px;
// 						color: #1A1A1A;
// 						margin-bottom: 35px;
// 					}
// 					.row{
// 						display: flex;
// 						align-items: flex-start;
// 						justify-content: space-between;
// 						margin-bottom: 30px;
// 						.label{
// 							color: #191919;
// 						}
// 						.value{
// 							color: #3A3A3A;
// 							text-align: right;
// 							max-width: 400px;
//     						word-break: break-all;
// 						}
						
// 						&:last-child{
// 							margin-bottom: 10px;
// 						}
// 					}
					
// 					.el-price{
// 						font-weight: bold;
// 					}
// 				}
// 			}
// 		}
// 	}
// }

</style>